"use client"

import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import type { Player, PlayerCategory } from "@/lib/types"
import SkillBadges from "@/components/skill-badges"

interface PlayerCardProps {
  player: Player
  onClick: () => void
  category: PlayerCategory
}

export default function PlayerCard({ player, onClick, category }: PlayerCardProps) {
  // Filter skills based on category
  const displaySkills = player.skills || [];
  
  // Different card styles based on category
  if (category === "overall") {
    return (
      <Card
        className="bg-gray-800/70 border-gray-700 hover:bg-gray-700/70 transition-colors cursor-pointer overflow-hidden"
        onClick={onClick}
      >
        <CardContent className="p-4">
          <div className="flex items-center gap-4">
            <div className="flex-shrink-0 relative">
              <div className="w-16 h-16 rounded-full overflow-hidden border-2 border-gray-600">
                <img
                  src={player.avatar || "/placeholder.svg"}
                  alt={player.name}
                  className="w-full h-full object-cover"
                />
              </div>
              <div className="absolute -top-2 -left-2 bg-gray-800 rounded-full w-6 h-6 flex items-center justify-center text-xs font-bold border border-gray-700">
                {player.rank || '-'}
              </div>
            </div>

            <div className="flex-1 min-w-0">
              <div className="flex items-center justify-between">
                <h3 className="font-bold text-lg truncate">{player.name}</h3>
                <Badge className="ml-2 bg-amber-600 hover:bg-amber-700">
                  {player.score ? player.score.toLocaleString() : '0'} pts
                </Badge>
              </div>

              <p className="text-gray-400 text-sm truncate">
                {player.title?.name || "新手"}
              </p>

              <div className="flex items-center justify-between mt-2">
                <Badge variant="outline" className="text-xs">
                  {getRegionName(player.region)}
                </Badge>
                <p className="text-xs text-gray-400">{player.tier || "无等级"}</p>
              </div>
            </div>
          </div>

          <div className="mt-4">
            <p className="text-xs text-gray-400 mb-2">Overall Proficiency</p>
            <SkillBadges skills={displaySkills} category={category} />
          </div>
        </CardContent>
      </Card>
    )
  } else {
    // Specific mode card - more compact, table-like layout
    return (
      <Card
        className="bg-gray-800/70 border-gray-700 hover:bg-gray-700/70 transition-colors cursor-pointer overflow-hidden"
        onClick={onClick}
      >
        <div className={`h-1 ${getTierColor(player.tier || "")}`} />
        <CardContent className="p-3">
          <div className="flex items-center justify-between mb-2">
            <div className="flex items-center gap-2">
              <div className="w-10 h-10 rounded-full overflow-hidden border-2 border-gray-600 flex-shrink-0">
                <img
                  src={player.avatar || "/placeholder.svg"}
                  alt={player.name}
                  className="w-full h-full object-cover"
                />
              </div>
              <div>
                <h3 className="font-bold text-sm truncate">{player.name}</h3>
                <p className="text-gray-400 text-xs truncate">{getRegionName(player.region)}</p>
              </div>
            </div>
            <Badge className="bg-amber-600 hover:bg-amber-700 text-xs">
              {player.score ? player.score.toLocaleString() : '0'}
            </Badge>
          </div>

          <div className="flex justify-between items-center">
            <div className="text-xs text-gray-400">
              Rank: <span className="font-bold text-white">{player.rank || '-'}</span>
            </div>
            <div className={`px-2 py-1 rounded-full text-xs font-medium ${getTierColor(player.tier || "")}`}>
              {player.tier || "无等级"}
            </div>
          </div>

          {displaySkills.length > 0 && (
            <div className="mt-2">
              <SkillBadges skills={displaySkills} category={category} />
            </div>
          )}
        </CardContent>
      </Card>
    )
  }
}

function getTierColor(tier: string): string {
  if (tier.includes("1")) return "bg-purple-500"
  if (tier.includes("2")) return "bg-blue-500"
  if (tier.includes("3")) return "bg-green-500"
  if (tier.includes("4")) return "bg-yellow-500"
  return "bg-red-500"
}

// 解析地区名称函数
function getRegionName(region: string | undefined): string {
  if (!region) return "未设置";
  
  // 如果地区字符串包含分隔符"|"，说明需要解析
  if (region.includes('|')) {
    const parts = region.split('|');
    return parts[0]; // 返回地区名称部分
  }
  
  return region;
} 